<script lang="ts" setup>
import useFetchYr, { useFetchYrRefs } from "./useFetchYr";

console.log("SelYr");
const emit = defineEmits(["update:curYr"]);
const props = defineProps({
  curYr: {
    type: [Number, String],
    default: ""
  }
});
const curYr = toRef(props, "curYr");
const { fetchDrawYr } = useFetchYr();
const { yearList } = useFetchYrRefs();
const show = ref(false);
// onMounted(() => {
//   console.log("useFetchYr");
//   fetchDrawYr();
// });
function handleClick(it: number | string, idx: number) {
  show.value = false;
  // curYr.value = it;
  emit("update:curYr", it, idx);
}
function toggleShow() {
  show.value = !show.value;
}

defineExpose({
  toggleShow
});
</script>

<template>
  <div>
    <div v-if="show" class="absolute top-27 left-0 w-full">
      <ul
        class="h-180 overflow-y-scroll shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)]"
      >
        <li
          class="h-40 center bg-[#fff] b-b-1 b-b-solid b-b-[#e5e5e5] last-of-type:b-b-none"
          v-for="(it, idx) in yearList"
          :key="idx"
          @click.stop="handleClick(it, idx)"
        >
          <span>{{ it }}</span>
        </li>
      </ul>
    </div>
    {{ curYr }}
  </div>
</template>
